<template>
  <div>
    <el-row class="elrow">
      <!-- 左 -->
      <el-col class="lcol" :span="4">
        <div class="left">
          <div class="state">
            <!-- logo -->
            <div class="top">
              <img class="topimg" src="../../assets/bxImg/login/top.png" alt="">
              <p>电商管理后台</p>
            </div>
            <!-- 侧边导航 -->
            <el-menu unique-opened router background-color="#001529" text-color="#9EA6AD" active-text-color="#fff"
              default-active="/index/home" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
              <!-- 1 -->
              <el-menu-item index="/home">
                <i class="el-icon-s-home"></i>
                <span slot="title">系统首页</span>
              </el-menu-item>
              <!-- 2 -->
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-present"></i>
                  <span>商品管理</span>
                </template>
                <el-menu-item index="/shop/list">商品列表</el-menu-item>
                <el-menu-item index="/shop/group">商品组</el-menu-item>
                <el-menu-item index="/shop/classify">分类管理</el-menu-item>
                <el-menu-item index="/shop/brand">品牌管理</el-menu-item>
                <el-menu-item index="/shop/setting">设置</el-menu-item>
              </el-submenu>
              <!-- 2 -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-tickets"></i>
                  <span>订单管理</span>
                </template>
                <el-menu-item index="/order/overview">订单概述</el-menu-item>
                <el-menu-item index="/order/status">订单状态</el-menu-item>
                <el-menu-item index="/order/protection">维权管理</el-menu-item>
                <el-menu-item index="/order/tools">工具</el-menu-item>
              </el-submenu>
              <!-- 3 -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-coin"></i>
                  <span>财务管理</span>
                </template>
                <el-menu-item index="/finance/integral">积分明细</el-menu-item>
                <el-menu-item index="/finance/amount">余额明细</el-menu-item>
                <el-menu-item index="/finance/bill">对账单管理</el-menu-item>
                <el-menu-item index="/finance/topup">充值记录</el-menu-item>
              </el-submenu>
              <!-- 4 -->
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-bank-card"></i>
                  <span>优惠管理</span>
                </template>
                <el-menu-item index="/offers/basic">基本功能</el-menu-item>
                <el-menu-item index="/offers/coupons">优惠券管理</el-menu-item>
              </el-submenu>
              <!-- 5 -->
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-s-custom"></i>
                  <span>会员管理</span>
                </template>
                <el-menu-item index="/member/vlist">会员列表</el-menu-item>
                <el-menu-item index="/member/voverview">会员概述</el-menu-item>
                <el-menu-item index="/member/level">会员等级</el-menu-item>
                <el-menu-item index="/member/vgroup">分组设置</el-menu-item>
              </el-submenu>
              <!-- 6 -->
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-s-shop"></i>
                  <span>活动管理</span>
                </template>
                <el-menu-item index="/active/seconds">秒杀管理</el-menu-item>
                <el-menu-item index="/active/spell">拼团管理</el-menu-item>
              </el-submenu>
              <!-- 7 -->
              <el-submenu index="7">
                <template slot="title">
                  <i class="el-icon-chat-line-round"></i>
                  <span>积分商城</span>
                </template>
                <el-menu-item index="/point/shoplist">商品列表</el-menu-item>
                <el-menu-item index="/point/swiper">轮播图管理</el-menu-item>
                <el-menu-item index="/point/sort">分类管理</el-menu-item>
                <el-menu-item index="/point/state">状态管理</el-menu-item>
              </el-submenu>
              <!-- 8 -->
              <el-submenu index="8">
                <template slot="title">
                  <i class="el-icon-monitor"></i>
                  <span>权限管理</span>
                </template>
                <el-menu-item index="/limits/store/list">门店管理</el-menu-item>
                <el-menu-item index="/limits/admin/list">管理员管理</el-menu-item>
                <el-menu-item index="/limits/withdraw">提现审核</el-menu-item>
                <el-menu-item index="/limits/role">角色管理</el-menu-item>
              </el-submenu>
              <!-- 9 -->
              <el-menu-item index="/evaluate">
                <i class="el-icon-star-on"></i>
                <span slot="title">评价管理</span>
              </el-menu-item>
              <!-- 10-->
              <el-submenu index="10">
                <template slot="title">
                  <i class="el-icon-s-comment"></i>
                  <span>信息管理</span>
                </template>
                <el-menu-item index="/mesage/idea">意见反馈</el-menu-item>
                <el-menu-item index="/mesage/coope">合作申请</el-menu-item>
                <el-menu-item index="/mesage/problem">用药问答</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>

        </div>

      </el-col>
      <!-- 右 -->
      <el-col class="rcol" :span="20">
        <!--  -->
        <div class="right">
          <!-- 登录的用户信息 -->
          <div class="user">
            <div class="usermes">
              <p class="time">{{ loginTime }}</p>
              <div class="lin"></div>

              <el-dropdown @command="clearUser">
                <div class="use">
                  <img class="userImg" src="../../assets/bxImg/login/userImg.png" alt="">
                  <div class="useP">
                    <p>欢迎您！</p>
                    <p>{{ users.textname }}</p>
                  </div>
                  <i class="el-icon-caret-bottom"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
          </div>
          <!-- 内容 -->
          <div class="content">
            <RouterView />
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import { RouterView } from 'vue-router';

export default {
  data() {
    return {
      users: {},
      loginTime: ''
    }
  },
  created() {
    this.users = JSON.parse(localStorage.getItem('user'))
    function getNowTime() {
      let now = new Date()
      let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let today = now.getDate(); //获取当前日(1-31)
      let hour = now.getHours(); //获取当前小时数(0-23)
      let minute = now.getMinutes(); //获取当前分钟数(0-59)
      let second = now.getSeconds(); //获取当前秒数(0-59)
      let nowTime = ''
      nowTime = year + '-' + fillZero(month) + '-' + fillZero(today) + ' ' + fillZero(hour) + ':' +
        fillZero(minute) + ':' + fillZero(second)
      return nowTime
    };

    function fillZero(str) {
      var realNum;
      if (str < 10) {
        realNum = '0' + str;
      } else {
        realNum = str;
      }
      return realNum;
    }
    setInterval(() => {
      this.loginTime = getNowTime()
    }, 1000)

  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    clearUser() {
      window.localStorage.clear()
      this.$router.push('/login');
    }

  },
  components: { RouterView }
}
</script>
<style lang="less" scoped>

/* 右边 */
.rcol {
  float: left;
  overflow: auto;
  width: 80%;
  height: 100%
}

/* 左边 */
.lcol {
  overflow: auto;
  float: left;
  width: 20%;
  height: 100%
}

.lcol::-webkit-scrollbar {
  display: none;
}

.elrow {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

.content {
  padding: 15px;
}

.state {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.el-menu-item.is-active {
  background-color: #1990FF !important;
}

.el-icon-caret-bottom {

  margin-top: 25px;
}

.useP {
  font-size: 12px;
  margin-top: 15px;
  margin-left: 5px;
}

.useP p {
  margin-bottom: 3px;
}

.userImg {
  width: 30px;
  height: 30px;
  margin-top: calc((65px - 30px)/2);
}

.use {
  display: flex;
}

.lin {
  background-color: rgb(187, 187, 187);
  height: 30px;
  width: 2px;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: calc((65px - 30px)/2);
}

.time {
  font-size: 14px;
  line-height: 65px;
}

.usermes {
  float: right;
  width: 320px;
  height: 65px;
  /* line-height: 65px; */
  display: flex;
}

.user {
  width: 100%;
  height: 65px;
  color: #595959;
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
  top: 0;
  background-color: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.1);
}

.topimg {
  width: 30px;
  height: 30px;
  margin-top: 17px;

}

.top p {
  margin-top: 17px;
  margin-left: 10px;
}

.top {
  width: 100%;
  box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.1);
  height: 65px;

  display: flex;
  color: #fff;
  font-size: 18px;
  background: #002140;
  padding: 0px 25px;
}

.left {
  height: 100vh;
  background: #001529;
  width: 100%;
}

.right {
  height: 100vh;
  background: #fff;
}</style>